<template>
    <div class="layout">
        <Row>
            <Col span="8">
            <Menu :theme="theme">
                <div class="layout_bg">
                    <div class="layout_bg_item">
                        内容管理系统
                    </div>
                </div>
                <Submenu v-for="(menuItem,menuIndex) in menuList" :name="`menu${menuIndex}`" :key="menuIndex">
                    <template slot="title">
                        <Icon type="ios-paper" />
                        {{menuItem.meta.title}}
                    </template>
                    <MenuItem :name="`child${menuIndex}-${index}`" v-for="(childItem,index) in menuItem.children" :key="index">
                      <router-link :to="{path:`/${menuItem.name}/${childItem.name}`}"> {{childItem.meta.title}}</router-link>
                    </MenuItem>
                </Submenu>
            </Menu>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    name: 'SideMenu',
    props: {
        menuList: {
            type: Array,
            default () {
                return []
            },
            theme: {
                type: String,
                default: 'dark'
            }
        }
    },
    data () {
        return {
            theme: 'dark'
        }
    },
    computed: {
    },
    mounted () {
        console.log(this.menuList, 'm')
    },
}
</script>
<style lang="less" scoped>
    .layout {
        padding-top: 1px;
    }
    .layout_bg {
        padding: 14px 24px;
        height: 64px;
        box-sizing: border-box;
        .layout_bg_item {
            height: 100%;
            background: rgb(64, 92, 168);
            text-align: center;
            line-height: 42px;
            color:#fff;
        }
    }
    a{
        display: block;
        width: 100%;
        height: 100%;
        color:#fff;
        &:hover{
            color:#fff;
        }
    }
</style>

